<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .header{
            height: 66px;
            background: lime;
            border: 1px solid rgb(58, 34, 34);
        }
        .banner{
            width: 1207px;
            height: 512px;
            background: rgb(199, 102, 178);
            margin: 25px auto;
        }
        .zhongbu{
            width: 1207px;
            height:36px;
            background: rgb(223, 220, 224);
            margin: 0px auto;
        }
        .yewei{
            width: 1207px;
            height: 1000px;
            background: rgb(243, 242, 245);
            margin: 25px auto 12px;
        }
        .weibu{
            width: 1207px;
            height: 35px;
            background: rgb(182, 104, 91);
            text-align: center;
            line-height: 35px;
            margin: 12px auto 0px;
        }
        .header .left{
            float: left;
            margin-top: 26px;
            margin-left: 35px;
        }
        .header ul{
            float: left;
            margin-top: 15px;
            margin-left: 257px;
        }
        .header .right{
            float: right;
            margin-top: 15px;
        }
        .header li{
            float: left;
            margin-top: 15px;
        }
        .banner .left{
            float: left;
            width: 909px;
        }
        .banner ul{
            float: right;
            width: 271px;
        }
        .banner .right li{
            width: 272px;
            height: 163px;
            margin-bottom: 12px;
            background: red;
            overflow: hidden;
            position: relative;
        }
        .banner .right dt{
            height: 511px;
        }
        .banner .right p{
            position: absolute;
            left: 0px;
            bottom: 0px;
            background:rgb(0,0,0,0.3);
            width: 289px;
            height: 52px;
            line-height: 30px;
            color:rgb(252, 252, 252);
        }
        .banner .disi{
            width: 100%;
            height: auto;
        }
        .banner .dier{
            width: 100%;
            height: auto;
        }
        .banner .disan{
            width: 100%;
            height: auto;
        }
        textarea{
            resize:none;
            width: 131px;
            height: 100px;
            outline: none;
        }
        textarea{
            resize:none;
            width: 400px;
            height: 100px;
            outline: none;
        }
        .weibu li{
            height: 314px;
            width: 289px;
            background:#ffffff;
            overflow: hidden;
            position: relative;
            margin-bottom: 12px;
            float: left;
        }
        .weibu .matong{
            margin-right: 17px;
            margin-left: 17px;
        }
        .weibu .yujia{
            margin-right: 17px;  
        }
        .weibu .shizhuang{
            margin-right: 17px;
            margin-left: 17px;
        }
        .weibu .guoji{
            margin-right: 17px;
        }
        .weibu .qianbi{
            margin-right: 17px;
            margin-left: 17px;
        }
        .weibu .tanzi{
            margin-right: 17px;
        }
        .zanzu{
            width: 1207px;
            height: 240px;
            margin-top: 75px;
            margin-left: auto;
            margin-right: auto;
        }
        .zanzu .hz{
            font-size: 13px;
            color: gray;
            margin-bottom: 64px;
        }
        .zanzu li{
            float: left;
            margin-bottom:37px; 
            margin-left: 10px;
        }
        .zanzu .yq{
            float: left;
            font-size: 13px;
            color: gray;
            margin-top: 37px;
            width: 1200px;
        }
        .zanzu .yj{
            font-size: 13px;
            color: gray;
            width: 1200px;
            margin-top: 30px;
            float: left;
            
        }
    </style>
</head>
<body>
    <div class="header">
        <span class="left"></span>
        <ul>
            <li>赞</li>
            <li>哈</li>
            <li>好</li>
            <li>牛</li>
        </ul>
        <span class="right">登录</span>
    </div>
    <div class="banner">
        <img src="images/s003.jpg" alt=""class="diyi">
        <ul class="right">
            <li>
                <img src="images/s02.jpg" alt=""class="dier">
                <p>想点亮圣诞气氛，试试这个驯鹿</p>
            </li>
            <li>
                <img src="images/s03.jpg" alt=""class="disan">
                <p>100个设计师，100个故事</p>
            </li>
            <li>
                <img src="images/s04.jpg" alt=""class="disi">
                <p>旧椅子获新生，还比以前更炫酷了</p>
            </li>
        </ul>
    </div>
    <ul class="zhongbu">
            <form action="">
                <select name="" id="">
                  <option value="">最新</option> 
                 </select>
                    <select name="" id="">
                        <option value="">最热</option> 
                     </select>
                     <select name="" id="">
                        <option value="">热议</option> 
                     </select>
                     <select name="" id="">
                        <option value="">随机</option> 
                     </select>
            </form>
    </ul>
    <ul class="weibu">
            <ul>
                <li>
                    <img src="images/i01.jpg" alt="">
                    <p>用水才能擦去笔迹，它只想保护好设计师的创意</p>
                </li>
                <li class="matong">
                    <img src="images/i02.jpg" alt="">
                <p>马桶刷也要有优雅的姿态</p>
                </li>
                <li class="yujia">
                    <img src="images/i03.jpg" alt="">
                    <p>健身也是 [科技范] ，你以为仅仅只是个瑜伽垫？</p>
                </li>
                <li class="shuazi">
                    <img src="images/i04.jpg" alt="">
                    <p>牙缝清洁怎么办？牙签牙线都过时了，用[刷子]刷吧</p>
                </li>
                <li class="shujia">
                    <img src="images/i05.jpg" alt="">
                    <p>矮了怎么办？照样能够拿到书架最顶端的书</p>
                </li>
                <li class="shizhuang">
                    <img src="images/i06.png" alt="">
                    <p>这简直是一场关于肉体的盛宴，无关设计，无关时尚，无关商业......</p>
                </li>
                <li class="guoji">
                    <img src="images/i07.png" alt="">
                    <p>中国国际设计节PK世界工业设计大会，哪个会更棒？</p>
                </li>
                <li class="gongye">
                    <img src="images/i07.jpg" alt="">
                    <p>首届世界工业设计大会开在家门口杭州，中国设计师们燥起来</p>
                </li>
                <li>
                    <img src="images/i08.jpg" alt="">
                    <p>窝在北方的暖炉里，你应该需要这样一个散热阀门？</p>
                </li>
                <li class="qianbi">
                    <img src="images/i09.jpg" alt="">
                    <p>废纸打造的铅笔，像是一朵朵落入凡间的花</p>
                </li>
                <li class="tanzi">
                    <img src="images/i10.jpg" alt="">
                    <p>依靠在毯子上，这件事听着就让人舒坦</p>
                </li>
                <li>
                    <img src="images/i11.jpg" alt="">
                    <p>别笑话虚拟键盘没有实体按键，打字or音乐，他们说变就能变</p>
                </li>
            </ul>
        </ul>
        <p class="yewei">lalalalalla</p>
        <div class="zanzu">
            <p class="hz">合作伙伴</p>

            <ul>
                    <li><img src="images/x01.png" alt=""></li>
                    <li><img src="images/x02.png" alt=""></li>
                    <li><img src="images/x03.png" alt=""></li>
                    <li><img src="images/x04.png" alt=""></li>
                    <li><img src="images/x05.png" alt=""></li>
                    <li><img src="images/x06.png" alt=""></li>
                    <li><img src="images/x07.jpg" alt=""></li>
            </ul>
            <p class="yq">友情链接</p>
            <p class="yj">DRC北京工业设计创意产业基地  |  中国工业设计协会  |  设计帮  |  网易家居  |  凤凰家居  |  智东西  |  壹网空间  |  七牛云储存  |  高清图片 |  Fotor</p>
        </div>
   
    
</body>
</html>